<template>
	<view class="content">
		<!-- navbar部分 -->
		<u-navbar
			@leftClick="backHome"
			:autoBack="false"
			:bgColor="'rgba(15, 23, 79,1)'"
			:leftIconColor="'rgba(255,255,255,1)'"
			leftText="自动巡检"
			style="margin-bottom: 128rpx;"
		>
		</u-navbar>
		<!-- 内容区域 -->
		<view class="Select">
			<!-- 下拉框 -->
				<uni-data-select
					v-model="value"
					:localdata="range"
					@change="change"
					class="SelectBox"
				>
				</uni-data-select>
				<!-- 选择日期 -->
				<view class="Databtn">
					<uni-datetime-picker v-model="AutoTime" @change="changeLog" />
				</view>
				 <!-- 搜索按钮 -->
				<button class="topBtn" @click="searchAuto">
				 	<uni-icons type="search" size="18" color="#fbfbfc" style="margin-right: 2rpx;"></uni-icons>
				</button>
		</view>
		
		<!-- 表格 -->
		<view class="zdxj">
			<scroll-view class="table-wrapper" scroll-x>
			  <table class="table">
			    <!-- 表头行 -->
			    <thead>
			      <tr>
			        <th align="center" width="60rpx">任务编码</th>
			        <th align="center" width="85rpx">任务名称</th>
			        <th align="center" width="80rpx">执行时间</th>
			        <th align="center" width="80rpx">停留时间</th>
			        <th align="center" width="90rpx">任务状态</th>
			        <th align="center" width="150rpx">创建时间</th>
			        <th align="center">操作</th>
			      </tr>
			    </thead>
			    <!-- 表格数据行 -->
			    <tbody v-if="taskList.length>0">
			      <tr v-for="(item,key) in pagedAlarmArry" :key="item.id">
			        <td align="center">{{item.task_num}}</td>
			        <td align="center">{{item.task_name}}</td>
			        <td align="center">{{item.execution_time}}</td>
			        <td align="center">{{item.residence_time}}</td>
			        <td align="center">
								<view v-if="item.task_state === 0" class="tdTaskLine1">
									未执行 
								</view>
								<view v-if="item.task_state === 1" class="tdTaskLine">
									已执行
								</view>
							</td>
			        <td align="center">{{parseTime(item.creater_time)}}</td>
			        <td align="center">
			          <image @click="addTask(item)" src="../../../static/images/home/chakan.png" style="width: 46rpx;height: 46rpx;margin-right: 21rpx;">
								</image>
			          <image @click="goDetails(item)" src="../../../static/images/Auto/shanchu.png" style="width: 46rpx;height: 46rpx;"></image>
			        </td>
			      </tr>
			    </tbody>
			    <tbody v-else>
			      <tr>
			        <td colspan="4" style="text-align: center;padding-top: 100rpx;">暂无数据</td>
			      </tr>
			    </tbody>
			  </table>
			</scroll-view>
		</view>
	
		<!-- 分页器 -->
		<view class="pageBox" v-if="totalItems > 0" >
			<button class="Previous" @click="prevPage" :disabled="currentPage === 1"><uni-icons type="back" size="20"></uni-icons></button>
			<view class="pagination" v-for="page in totalPages" :key="page">
				<button class="paginationBtn"  @click="changeToPage(page)" :class="{ active: page === currentPage }">{{ page }}</button>
			</view>
			<button class="Nextpage" @click="nextPage" :disabled="currentPage === totalPages"><uni-icons type="forward" size="20"></uni-icons></button>
		</view>
	
	</view>
</template>

<script>
	import {AutoData,deletTask} from '@/api/Auto/Auto.js'
	import {equipmentLion} from '@/api/equipment/equipment.js'
	import cookie from '../../../cookie.js'
	
	export default {
		data() {
			return {
				robot_id:undefined,
				token:cookie.get('access_token'),
				secretKey:cookie.get('secretKey'),
				//机器人选择
				value:cookie.get('robotid'),
				text:cookie.get('robot_name'),
				range:[
					{value:"", text:""}
				],
				//被选中机器人的id
				selectedRobotId:cookie.get('robotid'),
				//机器人名称
				robot_name:cookie.get('robot_name'),
				//被选中的机器人
				ranges:{},
				//输入的任务名
				task_name:'',
				//任务列表
				taskList:[],
				//任务状态
				task_state:'',
				//创建时间
				AutoTime: undefined,
				//分页信息
				pageSize: 2, // 每页显示条数
				currentPage: 1, // 当前页码
				DeleterowsId:'',
			}
		},
		onLoad(){
			this.value=cookie.get('robotid'),
			//机器人名称
			this.text=cookie.get('robot_name'),
			this.selectedRobotId=cookie.get('robotid'),
			//机器人名称
			this.robot_name=cookie.get('robot_name'),
			this.robotList() //机器人切换
			this.AutoList()	 //自动巡检列表
			this.initPullDownRefresh(); // 初始化下拉刷新
		},
		mounted() {
			this.AutoList() //自动巡检列表
		},
		computed: {
		    totalItems() {
		      return this.taskList.length; // 总数据条数
		    },
		    totalPages() {
		      return Math.ceil(this.totalItems / this.pageSize); // 总页数
		    },
		    pagedAlarmArry() {
		      const start = (this.currentPage - 1) * this.pageSize;
		      const end = start + this.pageSize;
		      return this.taskList.slice(start, end); // 当前页的数据
		    },
		},
		methods:{
			initPullDownRefresh() {
			  uni.startPullDownRefresh(); // 主动触发下拉刷新
			},
			onPullDownRefresh() {
				this.AutoTime = ''; // 清空当前选择的时间
			  this.refreshData(); // 下拉刷新时执行相应的逻辑操作
			},
			refreshData() {
			    // 下拉刷新时重新加载数据
					this.robotList() //机器人切换
					this.AutoList()	 //自动巡检列表
			
			    // 在1秒后停止下拉刷新
			    setTimeout(() => {
			      uni.stopPullDownRefresh();
			    }, 500);
			},
			//分页器
			prevPage() {
			  if (this.currentPage > 1) {
			    this.currentPage--;
			  }
			},
			nextPage() {
			  if (this.currentPage < this.totalPages) {
			    this.currentPage++;
			  }
			},
			changeToPage(page) {
			  if (page === '...') {
				  return;
				}
				this.currentPage = page;
			},
			//获取机器人信息
			robotList(){
				equipmentLion(this.token,this.secretKey).then(Response=>{
					Response.rows.map(item =>{
					  this.range = Response.rows.map(({ id, robot_name }) => ({ value: id, text: robot_name }));
					})
				})
			},
			//自动巡检列表
			AutoList(){
				AutoData(this.token,this.secretKey,this.AutoTime).then(Response=>{
					this.taskList = Response.rows
				})
			},
			backHome(){
				uni.reLaunch({
					url:'/pages/index'
				})
			},
			addTask(item){
				cookie.set('zdxjtask_id',item.id)
				uni.reLaunch({
					url:'/pages/common/addTask/addTask'
				})
			},
			change(e) {
				//保存选中机器人的id
				this.ranges = this.range.find(item => item.value === e)
				
				cookie.set('robotid',this.ranges.value)
				cookie.set('robot_name',this.ranges.text)
							
				this.selectedRobotId = this.ranges.value
				this.robot_name = this.ranges.text
				
				this.AutoList()
			},
			changeLog(e) {
				//截取时间年月日
				this.AutoTime = e.substring(0, 10)
			},
			//搜索
			searchAuto(){
				this.robot_id = this.value
				this.AutoList() //告警信息列表
			},
			//删除当前行
			goDetails(item){
				this.DeleterowsId = item.id
				deletTask(this.token,this.secretKey,this.DeleterowsId).then(Response=>{
					console.log('删除成功')
				})
			},
			//处理时间戳
			parseTime(time, pattern) {
				if (arguments.length === 0 || !time) {
					return null
				}
				const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
				let date
				if (typeof time === 'object') {
					date = time
				} else {
					if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
						time = parseInt(time)
					} else if (typeof time === 'string') {
						time = time.replace(new RegExp(/-/gm), '/').replace('T', ' ').replace(new RegExp(/\.[\d]{3}/gm), '');
					}
					if ((typeof time === 'number') && (time.toString().length === 10)) {
						time = time * 1000
					}
					date = new Date(time)
				}
				const formatObj = {
					y: date.getFullYear(),
					m: date.getMonth() + 1,
					d: date.getDate(),
					h: date.getHours(),
					i: date.getMinutes(),
					s: date.getSeconds(),
					a: date.getDay()
				}
				const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
					let value = formatObj[key]
					if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }
					if (result.length > 0 && value < 10) {
						value = '0' + value
					}
					return value || 0
				})
				return time_str
			}
		},
		
		
	}
</script>

<style lang="scss">
*{
		margin: 0;
		padding: 0;
		//touch-action: none;
	}
	page{
		 background: #F5F5F5;
	}
	.content {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
		margin-top: 60rpx;
	}
	.Select{
		width: 710rpx;
		height: 65rpx;
		// margin-top: 128rpx;
		z-index: 99;
		display: flex;
		justify-content: center;
		align-items: center;
		// background-color: chartreuse;
	}
	.SelectBox{
		width: 176rpx;
		height: 65rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 5rpx 6rpx 0rpx rgba(22,33,135,0.08);
		border-radius: 10rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
	}
	.SelectBox /deep/ .uni-icons{
		font-size: 0px !important;
	}
	.Databtn{
		width: 280rpx;
		height: 65rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 5rpx 6rpx 0rpx rgba(22,33,135,0.08);
		border-radius: 10rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		color: #999999;
		font-weight: 400;
		margin-left:18rpx;
		display:flex;
		justify-content: center;
		align-items: center;
	}
	.Databtn /deep/ .uni-icons{
		font-size: 0px !important;
	}
	.taskInput{
		width: 140rpx;
		height: 65rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 5rpx 6rpx 0rpx rgba(22,33,135,0.08);
		border-radius: 10rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
		margin-left: 8rpx;
	}
	.taskInput /deep/ .uni-input-input, .uni-input-placeholder{
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.topBtn{
		width: 88rpx;
		height: 54rpx;
		background: #0F174F;
		border-radius: 27rpx;
		margin-left: 15rpx;
		font-size: 26rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.zdxj{
		width: 710rpx;
		height: 760rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 5rpx 6rpx 0rpx rgba(22,33,135,0.08);
		border-radius: 12rpx;
		margin-top: 50rpx;
	}
	.table{
		border: none;
		border-spacing: 0;
		//touch-action: none;
	}
	.table thead th{
	    background: #E8E9EF;
	    z-index: 1;
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #333333;
			height: 76rpx;
			border: none;
	}
	.table tbody tr {
		height: 76rpx;
		border-radius: 10rpx;
		font-size: 25rpx;
	}
	.table tbody tr:nth-child(even) {
	    background: #F1F4FE;
	}
	
	.table-wrapper {
	  width: 100%;
	  white-space: nowrap;
	  overflow: auto;
		//background-color: cadetblue;
	}
	
	.table {
	  table-layout: fixed;
	  width: max-content;
	}
	
	.table thead th {
	  position: sticky;
	  top: 0;
	 // background-color: #f5f5f5;
	  z-index: 1;
	}
	
	.table td:last-child,
	.table th:last-child {
		width: 150rpx;
	  position: sticky;
	  right: 0;
	  background-color: #E8E9EF;
	  z-index: 1;
		border-left: 0.5rpx solid rgba(83, 83, 83, 0.1);
	}
	.table tbody tr:nth-child(odd) td:last-child {
	  background: #ffffff;
	}
	.table tbody tr:nth-child(even) td:last-child {
	  background: #f1f4fe;
	}
	
	//已执行
	.tdTaskLine{
		width: 75rpx;
		//height: 38rpx;
		background-color: #e6e6e6;
		border: 1px solid #FFFFFF;
		border-radius: 6rpx;
		//font-size: 25rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #5a5a5a;
		z-index: 1;
	}
	//未执行
	.tdTaskLine1{
			width: 75rpx;
			//height: 38rpx;
			background: rgba(248,11,22,0.22);
			border: 1px solid #FFFFFF;
			border-radius: 6rpx;
			//font-size: 25rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #F80B16;
			z-index: 1;
	}
	//分页器
	.pageBox{
		width: 455rpx;
		margin-top: 44rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		box-sizing: border-box;
		//background-color: chocolate;
	}
	//上一页
	.Previous{
		width: 40rpx;
		height: 40rpx;
		background: #EDEDED;
		border: 1px solid #000000;
		// border-radius: 4rpx;
		font-size: 8rpx;
		color: #666666;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	//下一页
	.Nextpage{
		width: 40rpx;
		height: 40rpx;
		border: 1px solid #142150;
		// border-radius: 4rpx;
		font-size: 8rpx;
		color: #666666;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.paginationBtn{
		width: 40rpx;
		height: 40rpx;
		font-size: 16rpx;
		font-family: Myriad Pro;
		font-weight: 400;
		color: #333333;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 20rpx;
		border: 1px solid #142150;
		// border-radius: 4rpx;
	}
	.active{
		width: 40rpx;
		height: 40rpx;
		background: #142150;
		// border-radius: 4rpx;
		font-size: 16rpx;
		font-family: Helvetica;
		font-weight: bold;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
